<template xmlns:el-radio="http://www.w3.org/1999/html">
  <div class="app-container" >
    <el-col :span="24">
      <el-card style="margin-bottom: 10px;">
        距离考试结束还有： <span style="color: #ff0000; font-weight: 700">{{ totalTime }}秒</span>

        <el-button  style="float: right; margin-top: -10px" type="primary" icon="el-icon-plus" @click.once="submit">
          交卷
        </el-button>

      </el-card>

    </el-col>

    <el-col :span="24">
      <el-card style="margin-bottom: 30px; ">

        <el-row :gutter="20"  class="card-line">
          <div>考试信息:</div></el-row>
        <el-row :gutter="20" class="card-line" >
          <el-col :span="8"> <div>试卷名称: {{paper.paperName}}</div> </el-col>
          <el-col :span="8">  <div>考生姓名: {{paper.createBy}}</div> </el-col>
          <el-col :span="8">  <div>考试时间: {{paper.totalTime}}</div> </el-col>
          <el-col :span="8">  <div>考试总分: {{paper.totalMark}}</div></el-col>
          <el-col :span="8">   <div>题目数量: {{paperData.length}}题</div> </el-col>
        </el-row>

      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card class="content-h" style="margin-bottom: 60px;">
      <span v-for="(item, index) in paperData" :key="item.quesId">
        <div v-show="index == currentIndex">
          <!-- 单选题 -->
          <div v-show="item.quesType == '单选题'">
            <div>
              <p class="card-title" style="color: #00afff">单选题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
            <div>
              <el-row :gutter="24" class="card-line">
                  <el-radio-group v-model="selectRadio" style="display: flex; flex-direction: column;text-color:blue">
                 <el-radio label="A" style="margin-top: 40px">A : {{item.sel_ContA}}</el-radio>
                        <el-divider></el-divider>
                 <el-radio label="B" style="margin-top: 40px">B : {{item.sel_ContB}}</el-radio>
                        <el-divider></el-divider>
                 <el-radio label="C" style="margin-top: 40px" >C : {{item.sel_ContC}}</el-radio>
                        <el-divider></el-divider>
                 <el-radio label="D" style="margin-top: 40px">D : {{item.sel_ContD}}</el-radio>
              </el-radio-group>
              </el-row>

            </div>
          </div>
          <!-- 多选题 -->
          <div v-show="item.quesType == '多选题'">
            <div>
              <p class="card-title" style="color: yellowgreen">多选题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
            <div>
              <el-checkbox-group
                v-model="selectsRadioList"
                style="display: flex; flex-direction: column"
              >
                  <el-checkbox label="A" style="margin-top: 40px">A: {{item.sel_ContA}}</el-checkbox>
                    <el-divider></el-divider>
                  <el-checkbox label="B" style="margin-top: 40px">B: {{item.sel_ContB}}</el-checkbox>
                    <el-divider></el-divider>
                  <el-checkbox label="C" style="margin-top: 40px">C: {{item.sel_ContC}}</el-checkbox>
                    <el-divider></el-divider>
                  <el-checkbox label="D" style="margin-top: 40px">D: {{item.sel_ContD}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <!-- 问答题 -->
            <div v-show="item.quesType == '简答题'">
            <div>
              <p class="card-title" style="color: yellowgreen">简答题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
            <div>
              <el-input
                v-model="answers"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                style="margin-top: 20px"
               >
            </el-input>
            </div>
          </div>
          <!-- 判断题 -->
          <div v-show= "item.quesType== '判断题'">
            <div>
              <p class="card-title" style="color: red">判断题</p>
              <p>{{index + 1 }}.{{item.quesName}}:</p>
              <el-radio-group v-model="judge" style="display: flex; flex-direction: column">
                 <el-radio label="true" style="margin-top: 40px">true</el-radio>
                <el-divider></el-divider>
                 <el-radio label="false" style="margin-top: 40px">false</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </span>
        </el-card>
      </el-col>

    <el-col :span="24">
        <el-button v-if="showPrevious"  type="primary" icon="el-icon-back"  @click="subtract">上一题</el-button>
        <el-button v-if="showNext" type="warning" icon="el-icon-right"  @click="add">下一题</el-button>
    </el-col>



  </div>

</template>

<style>



</style>

<script>
import {paperQuestionList,paperById,addUserAnswer} from "@/api/store/paper";

export default {
  name: "exam",
  data() {
    return {
      answers:"", //问答题
      showPrevious: false,
      showNext: true,
      currentIndex:0, //当前题目
      selectRadio:[],
      selectsRadioList:[],
      judge:undefined,
      paperData:{}, //试卷数据
      paper:{},
      totalTime:null,
      checkQuetionList:[1], //当前已做的题目
      paperId:undefined, //试卷id
      taskId : null, //任务id
      duration: null, //考试时长倒计时
      startTime : null, //开始时间
      endTime : null , //结束时间
      quesOptions:[],
      quesName:undefined,
      quesId: undefined,
      form:{},
      selContA:'',
      selContB:'',
      selContC:'',
      selContD:'',
      optionList:[],
      userAnswerId:'',
      centerDialogVisible:false,
    };
  },
  created() {
    this.getRouterData();
  },
  watch:{
    totalTime:{
      handler(newvalue,oldervalue){
        console.log(newvalue)
        if (newvalue == "0:0:0"){
          this.$alert('考试时间到，系统将自动提交', {
            confirmButtonText: '确定',
            callback: action => {
              this.submit()
              this.$message({
                type: 'info',
                message: `提交成功`
              });
            }
          });
        }
      },
      immediate:true
    }
  },

  methods:{
    //获取初始化数据
    getRouterData(){
      this.paperId = this.$route.params.paperId;
      paperQuestionList({paperId:this.$route.params.paperId}).then((response)=>{
        this.paperData = response.data;
        this.total = response.total;
        this.loading = false;


      });
      paperById({paperId:this.$route.params.paperId}).then((response)=>{
        this.paper = response.data;
        this.total = response.total;
        this.loading = false;
        this.startTime = new Date()
        this.startDate = Date.parse(new Date())
        this.endTime = this.startDate + 60 * response.data.totalTime*1000;//加考试时长的时间戳 考试时长单位为分钟
        // this.endTime = this.startDate + 10*1000;//加考试时长的时间戳 考试时长单位为分钟
        this.countDown();
      });
    },
    countDown(){
      setInterval(()=>{
        let time = Date.parse(new Date())
        if(this.endTime>=time){
          //正常执行
          let obj = this.getTimeNumber(this.endTime-time)
          this.totalTime = obj.hour+":"+obj.minutes+":"+obj.seconds
        }
      },1000)
    },


    add() {

      if (this.currentIndex === this.paperData.length -2){
        this.showNext = false;
      }

      if (this.currentIndex < this.paperData.length - 1) {
        this.showPrevious = true;
        //储存当前题目的值 更新答案
        let question = this.paperData[this.currentIndex];
        let down = this.paperData[this.currentIndex + 1];
        if (question.quesType == "多选题") {
          question.selectsRadioList = this.selectsRadioList;
        } else if (question.quesType == "单选题") {
          question.selectRadio = this.selectRadio;
        } else if (question.quesType == "简答题") {
          question.answers = this.answers;
        } else if (question.quesType == "判断题") {
          question.judge = this.judge;
        }
          //获取下一道题目的答案，进行渲染
        if (down.quesType == "多选题") {
            this.selectsRadioList =
              down.selectsRadioList == undefined ? [] : down.selectsRadioList;
          } else if (down.quesType == "单选题") {
            this.selectRadio =
              down.selectRadio == undefined ? null : down.selectRadio;
          } else if (down.quesType == "简答题") {
            this.answers =
              down.answers == undefined ? null : down.answers;
          } else if (down.quesType == "判断题") {
            this.judge = down.judge == undefined ? null : down.judge;
          }
          //切换当前题目的下标
          this.currentIndex = this.currentIndex + 1;


        }
    },
    //上一题
    subtract() {


      if (this.currentIndex === 1){
        this.showPrevious =false;
      }

      if (this.currentIndex > 0) {
        this.showNext = true;
        //储存上一题的选中值
        let question = this.paperData[this.currentIndex];
        let up = this.paperData[this.currentIndex - 1];
        //获取当前题目，记性答案的储存更新
        if (question.quesType == "多选题") {
          question.selectsRadioList = this.selectsRadioList;
        } else if (question.quesType == "单选题") {
          question.selectRadio = this.selectRadio;
        } else if(question.quesType == "简答题"){
          question.answers = this.answers;
        }else if (question.quesType == "判断题") {
          question.judge = this.judge;
        }

        //获取上一道题 进行答案的渲染
        if (up.quesType == "多选题") {
          this.selectsRadioList =
            up.selectsRadioList == undefined ? [] : up.selectsRadioList;
        } else if (up.quesType == "单选题") {
          this.selectRadio =
            up.selectRadio == undefined ? null : up.selectRadio;
        } else if(up.quesType == "简答题"){
          this.answers =
            up.answers == undefined ? null : up.answers;
        } else if (up.quesType == "判断题") {
          this.judge = up.judge == undefined ? null : up.judge;
        }
        //切换当前题目的下标
        this.currentIndex = this.currentIndex - 1;

      }
    },

    open1() {
      this.$message({
        message: '提交试卷成功',
        type: 'success',
      });
    },
    submit() {
      addUserAnswer(this.submitDataInit()).then((res) => {
        this.open1();
        this.$router.push("/paperList")
        // console.log(res.data)
        this.userAnswerId = res.data
        this.centerDialogVisible = true
        //this.getUser(res.data)
        //  if(res.data == this.paperData.questionList){
        //    this.$modal.msgSuccess("提交成功");
        //  }else {
        //    this.$modal.msgError("提交失败");
        //  }
      });
    },

    submitDataInit() {
      //用于修复提交的时候 当前页面数据未加载进来的bug
      let question = this.paperData[this.currentIndex];
      if (question.quesType == "多选题") {
        question.selectsRadioList = this.selectsRadioList;
      } else if (question.quesType == "单选题") {
        question.selectRadio = this.selectRadio;
      }else if (question.quesType == "简答题") {
        question.answers = this.answers;
      }
      //整理数据
      let ary = this.paperData.map((item) => {
        if (item.quesType == "单选题") {
          if (item.selectRadio != null) {
            item.isAnswer =
              item.selectRadio === item.answer ? true : false;
          } else {
            item.isAnswer = false;
          }
        } else if (item.quesType == "多选题") {

        } else if (item.quesType == "简答题") {
          if (item.selectsRadioList != null) {
            //判断答案是否正确
            item.isAnswer =
              item.answer === item.answers ? true : false;
          } else {
            item.isAnswer = false;
          }
        }
        return item;
      });

      // // //统计分值
      // let score = ary.map(obj=>{if(obj.isAnswer){return parseInt(obj.score)}else {return 0}}).reduce((pre ,cur )=>pre+cur)

      //设置数据
      let param = {
        paperId: parseInt(this.paperId),
        optionList:[],
      }
      param.optionList = ary.map(item=>{
        let obj = {
          quesId:item.quesId,
          quesType:item.quesType,
        }
        if(item.quesType == "单选题"){
          obj.userAnswer = item.selectRadio
        }else if(item.quesType == "多选题"){
          obj.userAnswer = item.selectsRadioList != null ? item.selectsRadioList.join(""):""
        }else if(item.quesType == "简答题"){
          obj.userAnswer = item.answers != null ?item.answers:""
          // obj.questionsAnswer = item.answer
        }else if (item.quesType == "判断题"){
          obj.userAnswer = item.judge;
        }
        return obj
      })
      //console.log(ary,score,this.paperData,param)
      // this.userTotalPoint = param.totalPoints
      return param
    },

    getTimeNumber (number) {
      var hour = Math.floor(number / 3600/1000), //小时
        minutes = Math.floor((number - hour * 3600) / 60/1000),
        seconds = Math.floor(number - (hour * 3600 + minutes * 60)*1000)/1000;
      return {
        hour: hour,
        minutes: minutes,
        seconds: seconds
      }
    }
    }

}
</script>

<style scoped>

</style>
